<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		body{
			text-align: center;
		}
	</style>
</head>
<body>
	<h2>超级玛丽动画</h2>
	<img id="img1" src="image.png"/>
	<input id="btngo" type="button" name="" value="开始" onclick="init()">
	<hr/>
	<canvas id="mycanvas" width="800px" height="500px" style="border:1px solid #000"></canvas>

</body>
</html>

<script type="text/javascript">
	var startflag = false;
	var frames = [];
	for (var i = 0; i < 15; i++) {
		frames[i]=[32*i,0]
	}

	var fwidth = 32, fheight = 32;

	function $(id){
		return document.getElementById(id)
	}

	function init() {
		if(!startflag){
			var context = $('mycanvas').getContext('2d');
			var findex = 0;
			timer = setInterval(function () {
			context.clearRect(0,0,500,500)
			context.drawImage(img1,frames[findex][0],frames[findex][1],fwidth,fheight,64,64,fwidth*5,fheight*5);
			findex++;
			if (findex>=15) {
				findex=0
			}
			},100)	

			$('btngo').value = '停止';
			startflag = true;


		}else{
			$('btngo').value = '开始';
			startflag = false;
			clearInterval(timer)
		}
		
	}

</script>